<template>
  <div class="check-box">
    <div class="check" v-for="(item) of group" :key="item.name">
      <el-checkbox-group v-model="checkedList" @change="checkHandle()">
        <el-checkbox :label="item.id">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    group: {
      type: Array,
      default: () => []
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    checked: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    allState() {
      return this.group.map((item) => item.id);
    },
    isCheckedAll() {
      return this.checkedList.length == this.allState.length;
    },
  },
  data() {
    return {
      checkedList: []
    };
  },
  watch: {
    // listenChange: {
    //   handler(val) {
    //     console.log(val);
    //     this.checkedList = val.group.map((item) => item.id);
    //   },
    //   deep: true,
    //   immediate: true
    //
    // },
    checked: {
      handler(val) {
        this.checkedList = val;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    checkedAllChange(isCheck) {
      this.checkedList = isCheck ? this.allState : [];
    },
    checkHandle() {
      this.$emit("changeGroup", this.checkedList, this.currentIndex);

    }
  }
};
</script>
<style lang="scss" scoped>
.check-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}

.check {
  line-height: 32px;
  position: relative;
  min-width: 0;
  margin-bottom: 15px;
  font-size: 12px;

  .el-checkbox:last-of-type {
    margin-right: 30px;
  }

  :deep(.el-checkbox__label) {
    font-size: 12px;
  }

  .sec_label {
    font-size: 12px;
    line-height: 32px;
  }

  .sec_content {
    background: #303339;
    border-radius: 4px;
    padding: 5px;
  }
}</style>
